﻿$(document).ready(function () {
    //define detault options for color picker plugin
    var colorPickerOptions =
    {
        onSubmit: function (hsb, hex, rgb, el) {
            var colorInt = parseInt(hex, 16);
            $(el).val(colorInt);
            $(el).ColorPickerHide();
            $(el).change();
        },
        onBeforeShow: function () {
            var str = parseInt(this.value);
            var hexString = str.toString(16);
            $(this).ColorPickerSetColor(hexString);
        }
    };

    function BindMasks(page) {
        $("table#Masks tr:not(:first)").remove();

        $("table#Masks").after("<div class='loadingImage'></div>");

        //Invoke AJAX method to get all the masks
        $.post(pathPrefix + "Masks/GetMasksList", { "Page": page }, function (result) {
            $("#itemTemplate").tmpl(result.Masks).appendTo("table#Masks");

            $("select[name='Corner']").each(function () {
                var corner = $(this).tmplItem().data.Corner;
                $(this).val(corner);
            });

            $("input[name='Color']").ColorPicker(colorPickerOptions);

            //insert the pages links (if there is more than one)
            if (result.Pages > 1) {
                insertPages(page, result.Pages);
                $("#pagesContainer").show();
            }
            else {
                $("#pagesContainer").hide();
            }

            $("table#Masks").siblings(".loadingImage").remove();

            tableAltRows();
        }, "json");
    }

    BindMasks(1);

    function insertPages(currentPage, pages) {
        $("#pagesContainer").html("<div>עבור לעמוד:</div>");

        //get the number of pages and set link for each of these
        for (var i = 1; i <= pages; i++) {
            //current page
            if (i == currentPage) {
                var page = "<div class='bold'>" + i + "</div>";
            }
            //other page
            else {
                var page = "<a href='' data-page='" + i + "'>" + i + "</a>";
            }
            $("#pagesContainer").append(page);
        }
    }

    //when clicking on a page's link - bind the masks table with this page
    $("#pagesContainer a").live("click", function () {
        var page = $(this).data("page");

        BindMasks(page);

        return false;
    });

    //when the user changes one of the input elements in a row
    $("tr :input").live("change", function () {
        var row = $(this).parents("tr");

        //get all the mask data
        var data = row.find(":input").serializeObject();

        if (data.Title != "" && data.MaskData != "") {
            //Invoke AJAX method to update this Design Mask (insert or edit)
            $.post(pathPrefix + "Masks/Update", data, function (result) {
                //update the DesignMaskId value (if inserted row)
                row.find("#DesignMaskId").val(result);
                row.find(".lnkDeleteMask").show();

                row.find(".successCell img").fadeIn(1000).delay(2000).fadeOut();
            }, "json");
        }
    });

    $(".lnkDeleteMask").live("click", function () {
        var row = $(this).parents("tr");
        var id = row.find("[name='DesignMaskId']").val();

        openConfirmDialog("האם אתה בטוח?", function () {
            //Invoke AJAX method to delete the Mask
            $.post(pathPrefix + "Masks/Delete", { "id": id }, function (result) {
                row.remove();
            }, "json");
        });

        return false;
    });

    //when the user clicks "AddMask"
    $("#btnAddMask").click(function () {
        //add new row using the template
        var row = $("#itemTemplate").tmpl(null).appendTo("table#Masks");

        row.find("input[name='Color']").ColorPicker(colorPickerOptions);

        row.find(":input").val("");

        row.find(".lnkDeleteMask").hide();
    });
});